<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_注册界面</title>
    <style>
        .max{
            width:700px;
            height:400px;
            border:5px solid gray;
            background-color:white;
            /*   让div水平居中-->*/
            margin :auto;
            margin-top:15px;

        }
        .left{
            float:left;
            margin-top:15px;
        }
        .center{
            float:left;
            margin-left :120px;
            margin-top:25px;

        }
        .right{
            float:right;
            margin-top:15px;
        }
        .left >label:first-child{
            color:yellow;
            font-size:20px;
        }
        .left >label:last-child{
            color:gray;
            font-size:20px;
        }
        .right label a{
            color:pink;
        }
        .lleft{
            text-align:right;
            height:45px;
        }
        .rright{
            padding-left:30px;
        }
        #username,#password,#email,#pho,#name,#birthday,#check{/* 并集选择器*/
            width:251px;
            height:32px;
            border-radius:5px;
            padding-left:5px;
        }
        #check{
            width:110px;
        }
        #img-check{
            height:50px;
            vertical-align:middle;
        }
        #rbt{
            width:150px;
            height:40px;
            background-color:yellow;
            /* border:1px solid yellow;*/
        }
        .error{
            color: red;
        }
    </style>
    <script>
        function getCheckCode(){
                let elementById = document.getElementById("checkCode");
                var codeing=new Array("1","3","5","7","2","4","6","9","0","8","F","G","A","V","B","N","W","T","C","U","P","O","S","H","L","M","K");
                var code="";
                for (var i = 0; i < 4; i++) {
                    var x=Math.floor(Math.random()*26);
                    code=code+codeing[x];
              }
                elementById.innerText=code;
        }
        window.onload=function (){
            getCheckCode();
           function change(one){
                   let cbs = document.getElementsByName("cb");
               for (var i = 0; i < cbs.length; i++) {
                   cbs[i].checked=false;
               }
               let elementById = document.getElementById(one);
               elementById.checked=true;
            }
            document.getElementById("username").onblur=function (){
                    checkUserName();
            }

            function checkUserName(){
                var u_message=document.getElementById("u-message");
                var suserName=document.getElementById("username").value;
                var red_userName=/\w{8,14}/;
                var flag=red_userName.test(suserName);
                if(flag){
                    u_message.innerHTML="√";
                }
                else{
                    if (suserName.length>0)
                        u_message.innerHTML="用户名格式错误";
                }
                return flag;
            }
			function checkCode(){
                var value=document.getElementById("check").value;
				var rValue= document.getElementById("checkCode").innerText;
				if(rValue.toLowerCase()==value.toLowerCase()){
				    return true;
				 }else {
                    return false
                }
		
                return flag;
            }
            document.getElementsByTagName("form")[0].onsubmit=function (){
               if(checkUserName()&&checkCode()&&document.getElementById("agree").checked){
                   return true;
               }
                alert("数据有误 请核对!!!")
                return false;
            }

        }
    </script>
</head>
<body>
<div class="max">


    <div class="center">
        <form action="#" method="get">
           <div style="margin-left: 20px"> <label>类型</label><input id="1" name="cb" style="margin-left:35px" type="radio" checked onclick="change(0)">学生<input id="2" name="cb" style="margin-left: 40px" type="radio" onclick="change(1)">教师<input id="3" name="cb" style="margin-left: 45px" type="radio" onclick="change(2)">学校</div>
            <table >
                <tr >
                    <td class="lleft"><label for="username">账号</label></td>
                    <td class="rright"><input type="text" name="username" id="username" placeholder="请输入用户名"> <span id="u-message" class="error"></span></td>
                </tr>

                <tr >
                    <td class="lleft"><label for="password">密码</label></td>
                    <td class="rright"><input type="password" name="password" id="password"placeholder="请输密码"> <span id="p-message" class="error"></span></td>
                </tr>

                <tr >
                    <td class="lleft"><label for="email">邮箱</label></td>
                    <td class="rright"><input type="email" name="email" id="email"placeholder="请输入邮箱"></td>
                </tr>
                <tr >
                    <td class="lleft"><label for="check">验证码</label></td>
                    <td class="rright"><input type="text" name="check" id="check"placeholder="请输入验证码">
                        <div id="checkCode" style="float: right;width: 77px;height: 33px;border: black 1px solid;margin-right: 55px;background-color: yellowgreen" onclick="getCheckCode()"></div></td>
                </tr>
                <tr >
                    <td style="text-align: right"></td>
                    <td class="rright"><input id="agree" type="checkbox">我已同意并接受 &nbsp;<a href="#">德照用户协议</a></td>
                </tr>
                <tr >
                    <td colspan="2" align="center"><input type="submit" id="rbt" value="注册"></td>
                </tr>
            </table>
        </form>

    </div>
</div>>
</body>
</html>